﻿@using FwProject.Com.Dto
@using FwProject.ShoppingMall.Com
@model ShopAdInput
@{
}
<style>
    .hidden {
        display: none;
    }

    .layui-upload-img {
        width: 120px;
        height: auto;
    }
</style>
<form id="form0" class="layui-form" action="@Url.Action("Create")" method="post" novalidate="novalidate" data-ajax="true" data-ajax-begin="LockAjaxCallbackBack" data-ajax-success="ReloadAjaxCallbackgoback" data-ajax-failure="FailureAjaxCallback" data-ajax-method="Post" role="form" lay-filter="form1">
    <div class="layui-form layui-form-pane" style="padding:10px;">
        <div class="layui-form-item">
            @Html.LabelFor(o => o.AdName, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                @Html.TextBoxFor(o => o.AdName, new { @class = "layui-input" })
                @Html.ValidationMessageFor(o => o.AdName)
            </div>
        </div>
        <div class="layui-form-item">
            @Html.LabelFor(o => o.AdType, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                <enums asp-name="AdType" asp-valuetype="2" lay-filter="adType" asp-enum="typeof(AdType)"></enums>
            </div>
        </div>
        <div class="layui-form-item hidden" id="p">
            <label class="layui-form-label">商品明细</label>
            <div class="layui-input-block">
                <input type="text" id="search-shopProduct" class="layui-input" placeholder="请选择商品" value="">
            </div>
        </div>
        <div class="layui-form-item">
            @Html.LabelFor(o => o.AdFlag, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                @Html.DropDownListFor(o => o.AdFlag, ViewBag.Spaces as IEnumerable<SelectListItem>, new { lay_filter = "AdFlag" })
                @Html.ValidationMessageFor(o => o.AdFlag)
            </div>
        </div>
        <div class="layui-form-item layui-upload">
            @Html.LabelFor(o => o.PicLogo, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal" id="up_btn" data-src="#imagePic" style="float:left;">选择图片</button>
                <img class="layui-upload-img" id="imagePic" style="float:left; padding-left:10px;">
                @Html.TextBoxFor(o => o.PicLogo, new { @class = "hidden" })
                @Html.ValidationMessageFor(o => o.PicLogo)
            </div>
        </div>
        <div class="layui-form-item">
            @Html.LabelFor(o => o.HttpUrl, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                @Html.TextBoxFor(o => o.HttpUrl, new { @class = "layui-input" })
                @Html.ValidationMessageFor(o => o.HttpUrl)
            </div>
        </div>
        <div class="layui-form-item">
            @Html.LabelFor(o => o.Charge, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                @Html.TextBoxFor(o => o.Charge, new { @class = "layui-input" })
                @Html.ValidationMessageFor(o => o.Charge)
            </div>
        </div>
        <div class="layui-form-item">
            @Html.LabelFor(o => o.AdbeginTime, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                @Html.TextBoxFor(o => o.AdbeginTime, new { @class = "layui-input" })
                @Html.ValidationMessageFor(o => o.AdbeginTime)
            </div>
        </div>
        <div class="layui-form-item">
            @Html.LabelFor(o => o.AdEndTime, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                @Html.TextBoxFor(o => o.AdEndTime, new { @class = "layui-input" })
                @Html.ValidationMessageFor(o => o.AdEndTime)
            </div>
        </div>
        <div class="layui-form-item" pane="">
            @Html.LabelFor(o => o.IsActive, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                <input type="radio" name="IsActive" value="true" title="开启" checked="">
                <input type="radio" name="IsActive" value="false" title="关闭">
            </div>
        </div>
        <div class="layui-form-item layui-form-text" style="margin-bottom: 70px;">
            @Html.LabelFor(o => o.ContentDetails, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                @Html.TextAreaFor(o => o.ContentDetails, new { @class = "layui-textarea" })
            </div>
        </div>
        <div class="layui-layer-btn layui-layer-btn-" style="padding:8px 12px;z-index:1000;position: fixed;bottom:0;left: 1px;width: 98%;height: 50px; background:rgba(230,230,230,0.8)">
            <a id="save" class="layui-layer-btn0" lay-submit="" lay-filter="saveprops">保存</a>
        </div>
    </div>
</form>

@section scripts{
    <script src="~/js/main.js"></script>
    <script src="~/js/laydate/laydate.js"></script>
    <script src="~/js/search-suggest.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="~/lib/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="~/lib/ueditor/ueditor.all.min.js"></script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="~/lib/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript">
        var ue = UE.getEditor('ContentDetails',{
            initialFrameWidth: null,//设置为null即可
            initialFrameHeight: 650
        });
        var form, layer, layedit, upload;
        var width = height = 0;
        layui.use(['form', 'layedit', 'layer','upload'], function () {
            layedit = layui.layedit;
            form = layui.form;
            layer = layui.layer;
            upload = layui.upload;

            $.post("@Url.Action("GetByIdWidthAndHeight")", { "Id": $("#AdFlag").val()}, function (result) {
                    width = result.result.adWidht;
                    height = result.result.adHeight;
                });

            //自定义验证规则
            form.verify({
                required: function (value) {
                    if (value == "") {
                        return '必填项不能为空';
                    }
                }
            });

            form.on('select(adType)', function (data) {
                if (data.value == '明细页') {
                    $("#search-shopProduct").parent().parent().show();
                    $("#HttpUrl").attr("readonly", "readonly");
                } else {
                    $("#search-shopProduct").parent().parent().hide();
                    $("#HttpUrl").removeAttr("readonly");
                }
            });

            form.on("select(AdFlag)", function (obj) {
                width = 0;
                height =0;
                $.post("@Url.Action("GetByIdWidthAndHeight")", { "Id": obj.value }, function (result) {
                    width = result.result.adWidht;
                    height = result.result.adHeight;
                });
            });

            upload.render({
                elem: '#up_btn'
                , url: '@Url.Action("UpLoadImg")'
                , multiple: false//多文件上传
                , auto: false//自动上传
                , choose: function (obj) {
                    var flag = true;
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        var img = new Image();
                        img.src = result;
                        img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                            if (img.width == width && img.height == height) {
                                obj.upload(index, file); //满足条件调用上传方法
                                $('#imagePic').attr('src', result)
                            } else {
                                flag = false;
                                if (width == 0) {
                                    layer.msg("请稍后在试");
                                    return false;

                                }
                                layer.msg("保存失败：您上传的小图大小必须宽" + width + "：高" + height+"");
                                return false;
                            }
                        }
                        return flag;

                        //$('#imagePic').attr('src', result)
                        //$('#preview2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                    });
                }
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                       // $('#imagePic').attr('src', result)
                        //$('#preview2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                    });
                }
                , done: function (res) {
                    $('#PicLogo').val(res.result)
                    //上传完毕
                }
            });
        })
        var search = $("#search-shopProduct").searchSuggest({
            url: "/Commodity/GetSearchSuggest?keyword=", /*优先从url ajax 请求 json 帮助数据*/
            jsonp: null,
            width: 200,   /*提示框的宽度，缺省为输入框的宽度相同*/
            topoffset: 16,  /*提示框与输入框的距离，缺省为5*/
            style: 'list',
            cssFile: '/css/search-suggest.min.css',
            selectCallback: function (d) {
                $("#HttpUrl").val(d.id);
            }
        });


        function ReloadAjaxCallbackgoback(data, successInfo) {
            if (data.success) {
                layer.msg('保存成功！')
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭当前iframe页面
            } else {
                layer.msg('保存失败：' + successInfo);
            }
        }

        $('#save').on('click', function () {
            $('#form0').submit();
        });

        $(document).ready(function () {
            var start = {
                elem: "#AdbeginTime",
                format: "YYYY/MM/DD hh:mm:ss",
                min: "1980-01-01 00:00:00",
                max: "2099-06-16 23:59:59",
                istime: true,
                istoday: false,
                choose: function (datas) {
                    end.min = datas;
                    end.start = datas
                }
            };
            var end = {
                elem: "#AdEndTime",
                format: "YYYY/MM/DD hh:mm:ss",
                min: laydate.now(),
                max: "2099-06-16 23:59:59",
                istime: true,
                istoday: false,
                choose: function (datas) {
                    start.max = datas
                }
            };

            laydate(start);
            laydate(end);

        });
    </script>
}

